<template>
  <div class="hello">
    <header class="header">
      <h1>在线工具集合</h1>
      <el-button class="fullscreen-button" @click="toggleFullScreen" circle>
        <el-icon><FullScreen /></el-icon>
      </el-button>
    </header>

    <main class="app-layout-content">
      <div class="container">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="tool in tools" :key="tool.id">
            <el-card class="tool-card" shadow="hover">
              <div v-if="tool.link" class="card" @click="navigateTo(tool.link)">
                <div class="card-block card-tools">
                  <el-icon :size="40" :color="tool.iconColor">
                    <component :is="tool.icon"></component>
                  </el-icon>
                  <h2>{{ tool.name }}</h2>
                  <p>{{ tool.description }}</p>
                </div>
              </div>
              <div v-else class="card disabled">
                <div class="card-block card-tools">
                  <el-icon :size="40" :color="tool.iconColor">
                    <component :is="tool.icon"></component>
                  </el-icon>
                  <h2>{{ tool.name }}</h2>
                  <p>{{ tool.description }}</p>
                  <span class="coming-soon">即将上线</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, markRaw } from 'vue'
import { useRouter } from 'vue-router'
import { 
  FullScreen, Edit, Star, Key, Avatar, ZoomIn, PictureFilled, 
  Crop, Brush, Grid, User, PictureRounded, Paperclip, Tickets, 
  Link, Timer, DocumentCopy, Discount, House, Postcard, Calendar, 
  ChatLineRound, VideoCamera, Document 
} from '@element-plus/icons-vue'

const router = useRouter()

const markedIcons = {
  FullScreen: markRaw(FullScreen),
  Edit: markRaw(Edit),
  Star: markRaw(Star),
  Key: markRaw(Key),
  Avatar: markRaw(Avatar),
  ZoomIn: markRaw(ZoomIn),
  PictureFilled: markRaw(PictureFilled),
  Crop: markRaw(Crop),
  Brush: markRaw(Brush),
  Grid: markRaw(Grid),
  User: markRaw(User),
  PictureRounded: markRaw(PictureRounded),
  Paperclip: markRaw(Paperclip),
  Tickets: markRaw(Tickets),
  Link: markRaw(Link),
  Timer: markRaw(Timer),
  DocumentCopy: markRaw(DocumentCopy),
  Discount: markRaw(Discount),
  House: markRaw(House),
  Postcard: markRaw(Postcard),
  Calendar: markRaw(Calendar),
  ChatLineRound: markRaw(ChatLineRound),
  VideoCamera: markRaw(VideoCamera),
  Document: markRaw(Document)
}

const tools = ref([
  { id: 1, name: "空心文本生成器", description: "创建具有空心效果的文字", icon: markedIcons.Edit, iconColor: "#409EFF", link: "/hollow-text-generator" },
  { id: 2, name: "特殊字符", description: "各种特殊符号和字符集合", icon: markedIcons.Star, iconColor: "#67C23A", link: "/special-characters" },
  { id: 3, name: "翅膀昵称生成器", description: "生成带有翅膀符号的特殊昵称", icon: markedIcons.Key, iconColor: "#E6A23C", link: "/wing-nickname-generator" },
  { id: 4, name: "汉字拆字", description: "在线汉字拆解工具", icon: markedIcons.Edit, iconColor: "#F56C6C", link: "/chinese-character-dismantling" },
  { id: 5, name: "随机头像生成器", description: "生成独特的随机头像", icon: markedIcons.Avatar, iconColor: "#909399", link: "/random-avatar-generator" },
  { id: 6, name: "图片无损放大", description: "提高图片分辨率而不损失质量", icon: markedIcons.ZoomIn, iconColor: "#409EFF", link: "/image-upscaler" },
  { id: 7, name: "文本转图片", description: "将文字内容转换为图片格式", icon: markedIcons.PictureFilled, iconColor: "#67C23A", link: "/text-to-image" },
  { id: 8, name: "图片裁切", description: "在线裁剪和编辑图片", icon: markedIcons.Crop, iconColor: "#E6A23C", link: "/image-cropper" },
  { id: 9, name: "图像拾色器", description: "拾取图片上的颜色", icon: markedIcons.Brush, iconColor: "#F56C6C", link: "/image-color-picker" },
  { id: 10, name: "九宫格/多格切图", description: "将图片分割成多个格", icon: markedIcons.Grid, iconColor: "#909399", link: "/grid-image-cutter" },
  { id: 11, name: "国庆头像生成器", description: "生成国庆主题的个性化头像", icon: markedIcons.User, iconColor: "#409EFF", link: "/national-day-avatar-generator" },
  { id: 12, name: "图片格式转换", description: "在线转换图片格式，支持多种格式", icon: markedIcons.PictureRounded, iconColor: "#67C23A", link: "/image-converter" },
  { id: 13, name: "成语填空", description: "在线成语填空练习工具", icon: markedIcons.Edit, iconColor: "#E6A23C", link: "/idiom-completion" },
  { id: 14, name: "图片Base64转换", description: "图片转Base64，Base64转图片", icon: markedIcons.Paperclip, iconColor: "#F56C6C", link: "/image-base64-converter" },
  { id: 15, name: "SQL语句格式化", description: "在线格式化SQL语句，提高可读性", icon: markedIcons.Edit, iconColor: "#909399", link: "/sql-formatter" },
  { id: 16, name: "URL编码解码", description: "在线URL编码和解码工具", icon: markedIcons.Link, iconColor: "#409EFF", link: "/url-encoder-decoder" },
  { id: 17, name: "Unix时间互转", description: "Unix时间戳与日期时间互相转换", icon: markedIcons.Timer, iconColor: "#67C23A", link: "/unix-timestamp-converter" },
  { id: 18, name: "在线代码对比", description: "比较两段代码的差异", icon: markedIcons.DocumentCopy, iconColor: "#E6A23C", link: "/code-diff" },
  { id: 19, name: "Unicode中文互转", description: "Unicode编码与中文字符互相转换", icon: markedIcons.Edit, iconColor: "#F56C6C", link: "/unicode-converter" },
  { id: 20, name: "图片压缩", description: "在线压缩图片，减小文件大小", icon: markedIcons.Discount, iconColor: "#909399", link: "/image-compressor" },
  { id: 21, name: "字符串拼接", description: "在线拼接多个字符串", icon: markedIcons.Tickets, iconColor: "#409EFF", link: "/string-concatenation" },
  { id: 22, name: "多图合成GIF", description: "将多张图片合成为动态GIF图像", icon: markedIcons.PictureFilled, iconColor: "#67C23A", link: "/image-to-gif" },
  { id: 23, name: "GIF编辑", description: "在线编辑和调整GIF动画", icon: markedIcons.VideoCamera, iconColor: "#E6A23C", link: "/gif-editor" },
  { id: 24, name: "动态炫彩文字", description: "生成动态炫彩效果的文字", icon: markedIcons.Brush, iconColor: "#FF4500", link: "/dynamic-colorful-text" },
  { id: 25, name: "迷你屋", description: "创建和装饰你的迷你房间", icon: markedIcons.House, iconColor: "#909399", link: "/mini-house" },
  { id: 26, name: "二维码生成器", description: "在线生成自定义二维码", icon: markedIcons.Postcard, iconColor: "#409EFF", link: "/qr-code-generator" },
  { id: 27, name: "课程表", description: "在线课程表编辑工具", icon: markedIcons.Calendar, iconColor: "#67C23A", link: "/schedule" },
  { id: 28, name: "模糊昵称生成器", description: "生成模糊效果的微信昵称", icon: markedIcons.ChatLineRound, iconColor: "#E6A23C", link: "/blurred-nickname" },
  { 
    id: 29, 
    name: "快速生成Css样式", 
    description: "在线生成CSS样式代码", 
    icon: markedIcons.Edit, 
    iconColor: "#409EFF", 
    link: "/css-generator" 
  },
  { 
    id: 30, 
    name: "在线打写", 
    description: "在线英文打字练习工具", 
    icon: markedIcons.Edit, 
    iconColor: "#67C23A", 
    link: "/typing-practice" 
  },
  { 
    id: 31, 
    name: "条形码生成", 
    description: "在线生成各种格式条形码", 
    icon: markedIcons.Postcard, 
    iconColor: "#409EFF", 
    link: "/barcode-generator" 
  },
  { 
    id: 32, 
    name: "中文简繁体转换", 
    description: "在线中文简体繁体互转工具", 
    icon: markedIcons.Edit, 
    iconColor: "#67C23A", 
    link: "/chinese-converter" 
  },
  { 
    id: 33, 
    name: "在线旋转图片", 
    description: "在线旋转和调整图片方向", 
    icon: markedIcons.PictureRounded, 
    iconColor: "#409EFF", 
    link: "/image-rotator" 
  },
  { 
    id: 34, 
    name: "模板拼图", 
    description: "在线拼图模板制作", 
    icon: markedIcons.PictureRounded, 
    iconColor: "#409EFF", 
    link: "/template-puzzle" 
  },
  { 
    id: 35, 
    name: "数学题生成器", 
    description: "在线生成数学练习题", 
    icon: markedIcons.Edit, 
    iconColor: "#67C23A", 
    link: "/math-problem-generator" 
  },
  { 
    id: 36, 
    name: "年龄计算器", 
    description: "在线计算年龄和生日信息", 
    icon: markedIcons.Timer, 
    iconColor: "#ffda44", 
    link: "/age-calculator" 
  },
  { 
    id: 37, 
    name: "拼音字母表", 
    description: "声母韵母整体认读音节表", 
    icon: markedIcons.Document, 
    iconColor: "#ffda44", 
    link: "/pinyin-alphabet" 
  },
  { 
    id: 38, 
    name: "生肖查询", 
    description: "在线查询生肖年份对照表", 
    icon: markedIcons.Calendar, 
    iconColor: "#ffda44", 
    link: "/chinese-zodiac" 
  },
  {
    id: 39,
    name: "描字贴",
    description: "在线生成练字模板",
    icon: markedIcons.Edit,
    iconColor: "#409EFF",
    link: "/writing-practice"
  }
])

const navigateTo = (path) => {
  if (path) {
    router.push(path)
  }
}

const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch((e) => {
      console.error(`全屏模式启用失败: ${e.message}`)
    })
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}
</script>

<style lang="scss" scoped>
:global(body) {
  margin: 0;  
} 
 
.hello {
  --primary-color: #4a90e2;
  --background-color: #f0f2f5;
  --card-background: #ffffff;
  --text-color: #333333;

  font-family: 'Roboto', Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px; // 减少顶部的 padding
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
      margin: 0;
      font-size: 24px;
    }

    .fullscreen-button {
      position: absolute;
      right: 20px;
    }
  }

  .app-layout-content {
    flex: 1;
    padding: 20px;

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .tool-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .card {
        text-decoration: none;
        color: inherit;

        .card-block {
          padding: 20px;
          text-align: center;

          .el-icon {
            margin-bottom: 15px;
          }

          h2 {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: var(--primary-color);
            white-space: nowrap;  // 标题也保持一行
            overflow: hidden;
            text-overflow: ellipsis;
          }

          p {
            margin: 0;
            font-size: 14px;
            color: #666;
            white-space: nowrap;  // 强制一行显示
            overflow: hidden;     // 超出部分隐藏
            text-overflow: ellipsis;  // 显示省略号
            padding: 0 5px;      // 添加一些内边距，防止文字贴边
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .hello {
    .header {
      h1 {
        font-size: 20px;
      }
    }

    .app-layout-content {
      .tool-card {
        .card {
          .card-block {
            h2 {
              font-size: 16px;
            }

            p {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.disabled {
  opacity: 0.7;
  cursor: not-allowed;

  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.coming-soon {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  display: inline-block;
}
</style>




















